<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script src="./vue.js"></script>
<script src="./data.js"></script>
<body>
<!-- 	
		Vue 可以检测已有属性的修改,但是不能检测对象属性的添加或删除
	-->
	<div id="app">
		<ul>
			<custom-component v-for="item in list" :key="item.id" :goods-item="item" @toggle="toggle(item)"></custom-component>
		</ul>
	</div>	

<script>

	Vue.component('custom-component',{
		props: {
			goodsItem: {
				type: Object
			}
		},
		methods: {
			toggle (obj) {
				// if (obj.check) {
				// 	obj.check = false
				// } else {
				// 	obj.check = true
				// }
				this.$emit('toggle')
			}
		},
		template:`
		<div @click="toggle(goodsItem)" style="margin-top: 20px;">
			<span>{{goodsItem.check}}</span><span>{{goodsItem.age}}</span>
		</div>
		`
	})

	var  vm = new Vue({
		el:'#app',
		data: data,
		methods: {
			toggle (obj) {

				// obj.age = 27
        // Vue.set(obj, 'age', 27)
        
				if (obj.check) {
					obj.check = false
				} else {
					obj.check = true
				}
			}
		}
	})
</script>	
</body>
</html>